<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <style>
      body {
        background-color: #323232;
      }

      pre {
        white-space: pre-wrap;
        word-wrap: break-word;
        font-family: monospace;
        font-size: 0.8em;
        margin: 0;
      }

      .narrow {
        width: 0px;
      }

      .padding {
        margin: 100px;
      }

      .listing {
        background-color: #bfbfbf;
        background-color: lightsteelblue;
        border-radius: 4px;
        border: 1px solid grey;
        margin-top: 5px;
        margin-left: 20px;
        margin-right: 10px;
        padding: 10px;
      }

      .panel-heading {
        padding-bottom: 20px;
      }

      #header {
        background: #000;
      }

      #logo {
        height: 25px;
        margin: 10px;
      }

      .ipfs-entry-size {
        padding-left: 20px;
      }

      .ipfs-entry {
        padding-left: 5px;
        padding-right: 15px;
      }

      .ipfs-icon {
        width: 16px;
      }

      .ipfs-file {
        background-image:url('');
        background-repeat:no-repeat;
        background-size:contain;
      }

      .ipfs-gif {
        background-image: url('');
        background-repeat:  no-repeat;
        background-size: contain;
      }
      .ipfs-html {
        background-image: url('');
        background-repeat:  no-repeat;
        background-size: contain;
      }

      .ipfs-directory {
        background-image: url('');
        background-repeat:  no-repeat;
        background-size: contain;
      }

    </style>
    <title>IPFS directory index: {{ path }}</title>
  </head>

  <body>
    <div id="header" class="row">
    </div>
    <br/>
    <div class="listing">
      <div class="panel panel-default">
        <div class="panel-heading">
          <pre>Index of <b>{{ path }}</b></pre>
        </div>
        <table class="table table-striped">
          <tr>
            <td class="narrow">
              <div class="ipfs-icon ipfs-file">&nbsp;</div>
            </td>
            <td class="padding">
              <a href="..">..</a>
            </td>
            <td></td>
          </tr>

  {% for lnk in links %}
          <tr>
            <td class="ipfs-entry">
  {% if lnk['Type'] == 2 %}
              <div class="ipfs-icon ipfs-file">&nbsp;</div>
  {% else %}
              <div class="ipfs-icon ipfs-directory">&nbsp;</div>
  {% endif %}
            </td>

            <td class="ipfs-entry-name">
                <a href="{{ lnk['href'] }}">{{ lnk['Name'] }}</a>
            </td>
  {% if lnk['Type'] == 2 %}
            <td class="ipfs-entry-size">
              {{ lnk['Size'] |filesizeformat(true) }}
            </td>
  {% endif %}
          </tr>
  {% endfor %}
        </table>

      </div>
    </div>
  </body>
</html>
